<!-- 能源采购管理 -->
<template>
  <div class="productionPlan">
    <!-- {{checkboxGroup}} -->
    <!--  ========== () ==========  -->
    <div class="operate card">
      <div>能源种类</div>
      <div class="all">
        <el-checkbox-button :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox-button>
      </div>
      <div>
        <el-checkbox-group v-model="checkboxGroup" @change="handleCheckedCitiesChange">
          <el-checkbox-button v-for="city in cities" :label="city.value" :key="city.value">{{city.label}}</el-checkbox-button>
        </el-checkbox-group>
      </div>
      <div>年度</div>
      <div>
        <el-date-picker style="width:100px" v-model="s_time" :editable="false" :clearable="false" :type="d_type" :format="v_type" :value-format="v_type" :picker-options="pickerOptions"></el-date-picker>
      </div>
      <div>
        <el-button type :disabled="!checkboxGroup.length" @click="t_button">查询</el-button>
      </div>
      <div>
        <el-button type="primary" :disabled="!checkboxGroup.length" @click="t_add">新增</el-button>
      </div>
    </div>
    <el-row class="card" :gutter="0" style="padding-top:15px">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-loading="table_loading">
        <tb tableTitle="tb_007" @tb_005_editor="tb_005_editor" :tableData="tableData"></tb>
        <pagination :total="page.total" :pageNum="page.pageNum " @handleCurrentChange="handleCurrentChange" />
      </el-col>
    </el-row>
    <el-dialog :title="is_dialog_title" :visible.sync="is_dialog" width="900px">
      <el-form :model="add_edit_data" :rules="rules" ref="ruleForm" label-position="left" label-width="100px" class="demo-ruleForm">
        <div class="form_row">
          <el-form-item label="能源种类" prop="energyType">
            <el-select v-model="add_edit_data.energyType" style="width:220px" placeholder="请选择" @change="typeclicko">
              <el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="能源供应商" prop="energyProvider">
            <el-input v-model="add_edit_data.energyProvider" style="width:220px"></el-input>
          </el-form-item>
          <el-form-item label="投运时间" prop="transportationDates">
            <el-date-picker style="width:220px" :clearable="false" v-model="add_edit_data.transportationDates" type="date" value-format="yyyy-MM-dd" placeholder="选择日期时间"></el-date-picker>
          </el-form-item>
          <el-form-item label="容量" prop="capacity">
            <el-input v-model="add_edit_data.capacity" style="width:220px" :disabled="add_edit_data.energyType=='01'?false:true">
              <template slot="append">{{capacityUnit}}</template>
            </el-input>
          </el-form-item>
          <el-form-item label="合同单价" prop="contractPrice">
            <el-input v-model="add_edit_data.contractPrice" style="width:220px"></el-input>
          </el-form-item>
          <el-form-item label="合同单价单位" prop="Company">
            <el-input v-model="add_edit_data.Company" style="width:220px" :disabled="true">
              <template slot="append">{{priceUnit}}</template>
            </el-input>
          </el-form-item>
          <el-form-item label="年度" prop="yearPeriod">
            <el-date-picker style="width:220px" v-model="add_edit_data.yearPeriod" type="year" :clearable="false" :editable="false" value-format="yyyy" :picker-options="is_dialog_title === '新增能源计划'?pickerOptions1:false" />
          </el-form-item>
          <el-form-item label="预计采购量" prop="yearPurchaseVolume">
            <el-input v-model="add_edit_data.yearPurchaseVolume" style="width:220px">
              <template slot="append">{{purchaseUnit}}</template>
            </el-input>
          </el-form-item>
          <el-form-item label="商务联系人" prop="businessPerson">
            <el-input v-model="add_edit_data.businessPerson" style="width:220px"></el-input>
          </el-form-item>
          <el-form-item label="联系方式" prop="businessMobile">
            <el-input v-model="add_edit_data.businessMobile" style="width:220px"></el-input>
          </el-form-item>
          <el-form-item label="技术联系人" prop="techPerson">
            <el-input v-model="add_edit_data.techPerson" style="width:220px"></el-input>
          </el-form-item>
          <el-form-item label="联系方式" prop="techMobile">
            <el-input v-model="add_edit_data.techMobile" style="width:220px"></el-input>
          </el-form-item>
        </div>
        <div class="dialog_footer">
          <!-- <el-form-item> -->
          <el-button @click="resetForm('ruleForm',false)">取消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
          <!-- </el-form-item> -->
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
// import day from "@/utils/day.js"
import dayjs from 'dayjs'
import tb from '@/components/table'
import pagination from '@/components/pagination'
import './index.scss'
export default {
  name: 'productionPlan',
  data() {
    var number = (rule, value, callback) => {
      if (!Number.isInteger(Number(value))) {
        callback(new Error('请输入数字值'))
      } else {
        callback()
      }
    }
    return {
      //三个单位
      capacityUnit: '',
      priceUnit: '',
      purchaseUnit: '',
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() < Date.now()
        }
      },
      is_dialog_title: '',
      is_dialog: false,
      table_loading: true,
      page: {
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
      // ========== () ==========
      tableData: [],
      checkAll: true,
      isIndeterminate: true,
      checkboxGroup: [],
      cities: [],
      d_type: "year",
      s_time: "",
      v_type: "yyyy",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      rules: {
        // s_time: [
        //   { required: true, message: '请选择开始时间', trigger: 'change' },
        //   { validator: s_e_time, trigger: 'change' }
        // ],
        // e_time: [
        //   { required: true, message: '请选择结束时间', trigger: 'change' },
        //   { validator: s_e_time, trigger: 'change' }
        // ],
        // chejian_value: [
        //   { required: true, message: '请选择车间', trigger: 'change' },
        // ],
        // shengchanxian_value: [
        //   { required: true, message: '请选择生产线', trigger: 'change' },
        // ],
        // banzu_value: [
        //   { required: true, message: '请选择班组', trigger: 'change' },
        // ],
        // fuzeren: [
        //   { required: true, message: '请选择负责人', trigger: 'change' },
        // ],
        // chanpin_value: [
        //   { required: true, message: '请选择产品名称', trigger: 'change' },
        // ],
        // num: [
        //   { required: true, message: '请输入数量', trigger: 'change' },
        //   { validator: number, trigger: 'change' }

        // ],
      },
      //新增表单数据
      add_edit_data: {
        energyType: '',//下拉框选定数据
        energyProvider: '',//能源供应商
        transportationDates: '',//投运时间
        capacity: '',//容量
        contractPrice: '',//合同单价
        Company: '',//合同单价单位
        yearPeriod: '',//年度
        yearPurchaseVolume: '',//预计采购量
        businessPerson: '',//商务联系人
        businessMobile: '',//商务联系人电话
        techPerson: '',//技术联系人
        techMobile: ''//技术联系人电话               	
      },
      // editdata: {//编辑数据
      //   energyType: '',//下拉框选定数据
      //   energyProvider: '',//能源供应商
      //   transportationDates: '',//投运时间
      //   capacity: '',//容量
      //   contractPrice: '',//合同单价
      //   Company: '',//合同单价单位
      //   yearPeriod: '',//年度
      //   yearPurchaseVolume: '',//预计采购量
      //   businessPerson: '',//商务联系人
      //   businessMobile: '',//商务联系人电话
      //   techPerson: '',//技术联系人
      //   techMobile: ''//技术联系人电话               	
      // },
    }
  },
  created() {
    this.s_time = dayjs().format('YYYY')
    this.postTypelist().then(() => {
      this.posttablelist()
    })
  },
  methods: {
    //请求能源种类
    postTypelist() {
      let prodata2 = new Promise((resolve, reject) => {
        this.$axios.post(this.Eelec + '/web/energyProgramManage/queryEnergyTypeByDictTable'
        ).then(res => {
          this.loading = false
          if (res.data.code == 200) {
            this.cities = res.data.data
            this.checkboxGroup = res.data.data.map((item, index) => {
              return item.value
            })
          }
          resolve("1")
        }).catch(err => {
          console.log(err)
        })
      })
      return prodata2
    },
    //请求列表数据
    posttablelist() {
      this.$axios.post(this.Eelec + '/web/energyProgramManage/queryEnergyPrograms', {
        "energyTypes": this.checkboxGroup,
        "pageNum": this.page.pageNum,
        "pageSize": this.page.pageSize,
        "yearPeriod": this.s_time,
        'custId': sessionStorage.getItem('custId')
      }).then(res => {
        this.table_loading = false
        if (res.data.code == 200) {
          let tableData = res.data.data.data
          tableData.map((item, index) => {
            item.a = item.capacity + item.capacityUnit
            item.b = item.contractPrice + item.contractPriceUnit
            item.c = item.yearPurchaseVolume + item.purchaseUnit
            item.index = this.page.pageNum === 1 ? index + 1 : (this.page.pageNum - 1) * 10 + (index + 1)
            return item
          })
          this.tableData = tableData
          this.page.total = parseInt(res.data.data.totalCount)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    handleCurrentChange(v) {
      this.table_loading = true
      this.page.pageNum = v
      this.posttablelist()
    },
    handleCheckAllChange(val) {
      this.checkboxGroup = val ? this.cities.map((item, indx) => { return item.value }) : []
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.cities.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
    },
    typeclicko() {
      for (let i = 0; i < this.cities.length; i++) {
        if (this.cities[i].value == this.add_edit_data.energyType) {
          this.capacityUnit = this.cities[i].capacityUnit
          this.priceUnit = this.cities[i].priceUnit
          this.purchaseUnit = this.cities[i].purchaseUnit
        }
      }
    },
    t_add() {
      this.add_edit_data = {
        energyType: '',//下拉框选定数据
        energyProvider: '',//能源供应商
        transportationDates: '',//投运时间
        capacity: '',//容量
        contractPrice: '',//合同单价
        Company: '',//合同单价单位
        yearPeriod: '',//年度
        yearPurchaseVolume: '',//预计采购量
        businessPerson: '',//商务联系人
        businessMobile: '',//商务联系人电话
        techPerson: '',//技术联系人
        techMobile: ''//技术联系人电话    
      }
      this.is_dialog = true
      this.is_dialog_title = '新增能源计划'
    },
    tb_005_editor(row) {
      console.log(row)
      this.is_dialog = true
      this.capacityUnit = row.capacityUnit
      this.priceUnit = row.priceUnit
      this.purchaseUnit = row.purchaseUnit
      this.is_dialog_title = '编辑能源计划'
      this.add_edit_data = JSON.parse(JSON.stringify(row))
    },
    t_button() {
      this.table_loading = true
      this.page.pageNum = 1
      this.posttablelist()
    },
    // 新增保存
    Add_Data() {
      this.add_edit_data.custId = sessionStorage.getItem('custId')
      this.$axios.post(this.Eelec + '/web/energyProgramManage/addEnergyProgram',
        this.add_edit_data
      ).then(res => {
        if (res.data.code == 200) {
          this.is_dialog = false
          this.$message({
            message: '能源计划新增成功',
            type: 'success'
          })
          this.page.pageNum = 1
          this.posttablelist()
          // let clearData = this.adddata
          // for (let i in clearData) {
          //   clearData[i] = ''
          // }
          // this.adddata = clearData
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    //编辑保存
    Edit_Data() {
      this.$axios.post(this.Eelec + '/web/energyProgramManage/mofigyEnergyProgram',
        this.add_edit_data
      ).then(res => {
        if (res.data.code == 200) {
          this.is_dialog = false
          this.$message({
            message: '能源计划编辑成功',
            type: 'success'
          })
          // this.page.pageNum = 1
          this.posttablelist()
        } else {
          this.redactShow = false
          this.$message.error(res.data.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    submitForm(formName) {
      if (this.is_dialog_title === '编辑能源计划') {
        this.Edit_Data()
      } else {
        this.Add_Data()
      }
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //     if (this.dialog_title === '新增生产数据') {
      //       this.update('insert')
      //     } else {
      //       this.update('update')
      //     }
      //     console.log(this.ruleForm)
      //   } else {
      //     console.log('error submit!!')
      //     return false
      //   }
      // })
    },
    resetForm(formName, is) {
      this.$refs[formName].resetFields()
      this.is_dialog = is
    },
  },
  mounted() { },
  components: {
    tb,
    pagination
  },
}

</script>

<style lang='' scoped>
</style>